<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
            我在我的页面想去访问百度提供的一个服务器，
            百度给我们提供了很多的接口，比如说ip 地址查询，比如说
            天气预报，比如说火车票，机票查询.
    </title>
    <script src="template-native.js"></script>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head>
<body>
        <script type="text/template" id="templateId">
            <%for(var i=0;i<list.length;i++){%>
                <tr>
                    <td><%=list[i].date%></td>
                    <td><img src="<%=list[i].dayPictureUrl%>"></td>
                    <td><img src="<%=list[i].nightPictureUrl%>"></td>
                    <td><%=list[i].temperature%></td>
                    <td><%=list[i].weather%></td>
                    <td><%=list[i].wind%></td>
                </tr>
            <%}%>
        </script>

        <input  type="text" id="cityName"  placeholder="请输入城市"  >
        <input type="button" value="查询天气">
        <script>
                $("input[type=button]").on("click",function(){

                        var cityName=document.querySelector("#cityName").value;
                        //跨域是浏览器的安全策略.
                        //我现在是jQuery ，jQuery 怎么去解决
                        //jQuery 解决的方式.
                        $.ajax({
                                url:"http://api.map.baidu.com/telematics/v3/weather",
                                type:"get",
                                data:{
                                      location:cityName,
                                      output:'json',
                                      ak:'6tYzTvGZSOpYB5Oc2YGGOKt8'
                                },
                                /*预期服务器端返回的数据类型，假设我现在跨域了，我就改成jsonp 就可以了 */
                            dataType:"jsonp",
                            success:function(data){
                                console.log(data)
                                //百度那边的 数据已经回来，我现在要解析这个数据.
                                var weatherData=data.results[0].weather_data;
                                var obj={
                                    list:weatherData
                                }
                                var html=template("templateId",obj);
                                document.querySelector("table").innerHTML=html;
                            }
                        })
                })
        </script>

        <table>

        </table>

</body>
</html>